// @formily/react 的核心定位是将 ViewModel(@formily/core)与组件实现一个状态绑定关系，
// 它不负责管理表单数据，表单校验，它仅仅是一个渲染胶水层，但是这样一层胶水，并不脏，它会把
// 很多脏逻辑优雅的解耦，变得可维护。
import { Input, Button, Space } from "antd";
import {
  createForm,
  ArrayField as ArrayFieldType,
} from "../../designer-antd-v5/packages/formily-core/src";
import {
  FormProvider, // 入口组件，用于下发表单上下文给字段组件，负责整个表单状态的通讯，它相当于是一个通讯枢纽。
  FormConsumer, // 表单响应消费者，专门用于监听表单模型数据变化而实现各种 UI 响应的组件，使用方式为 render props.
  Field,
  ArrayField,
  useField,
  observer,
  createSchemaField,
  ExpressionScope, // 用于自定义组件内部给 json-schema 表达式传递局部作用域
  RecordScope,
  RecordsScope,
} from "../../designer-antd-v5/packages/formily-react/src";

const form = createForm();

const ArrayComponent = observer(() => {
  const field = useField<ArrayFieldType>();
  return (
    <>
      <div>
        {field.value?.map((item, index) => (
          <div key={index} style={{ display: "flex-block", marginBottom: 10 }}>
            <Space>
              <Field name={index} component={[Input]} />
              <Button
                onClick={() => {
                  field.remove(index);
                }}
              >
                Remove
              </Button>
              <Button
                onClick={() => {
                  field.moveUp(index);
                }}
              >
                Move Up
              </Button>
              <Button
                onClick={() => {
                  field.moveDown(index);
                }}
              >
                Move Down
              </Button>
            </Space>
          </div>
        ))}
      </div>
      <Button
        onClick={() => {
          field.push("");
        }}
      >
        Add
      </Button>
    </>
  );
});

const Container = (props: any) => {
  return (
    <ExpressionScope value={{ $innerScope: "this inner scope value" }}>
      {props.children}
    </ExpressionScope>
  );
};

const MyCustomComponent = (props: any) => {
  return (
    <RecordScope getRecord={() => props.record} getIndex={() => props.index}>
      {props.children}
    </RecordScope>
  );
};

const MyCustomComponent1 = (props: any) => {
  return (
    <RecordsScope getRecords={() => props.records}>
      {props.children}
    </RecordsScope>
  );
};

const SchemaField = createSchemaField({
  components: {
    Input,
    // Container,
    // MyCustomComponent,
    MyCustomComponent1,
  },
});

const FormilyReact: React.FC = () => (
  <FormProvider form={form}>
    <Field name="input" component={[Input, { placeholder: "Please Input" }]} />
    <ArrayField name="array" component={[ArrayComponent]} />
    <FormConsumer>{(form) => form.values.input}</FormConsumer>

    {/* <SchemaField>
      <SchemaField.Void x-component="Container">
        <SchemaField.String
          name="input"
          x-component="Input"
          x-value="{{$innerScope}}"
        />
      </SchemaField.Void>
    </SchemaField> */}
    {/* <SchemaField
      schema={{
        type: "object",
        properties: {
          lookup: {
            type: "void",
            "x-component": "MyCustomComponent",
            "x-component-props": {
              record: {
                name: "Lookup Name",
                code: "Lookup Code",
              },
              index: 1,
            },
            properties: {
              record: {
                type: "void",
                "x-component": "MyCustomComponent",
                "x-component-props": {
                  record: {
                    name: "Name",
                    code: "Code",
                  },
                  index: 0,
                },
                properties: {
                  input: {
                    type: "string",
                    "x-component": "Input",
                    "x-value":
                      "{{`" +
                      "${$record.name} " +
                      "${$record.code} " +
                      "${$record.$index} " +
                      "${$record.$lookup.name} " +
                      "${$record.$lookup.code} " +
                      "${$index} " +
                      "${$lookup.name} " +
                      "${$lookup.code} " +
                      "`}}",
                  },
                },
              },
            },
          },
        },
      }}
    ></SchemaField> */}
    <SchemaField
      schema={{
        type: "object",
        properties: {
          records: {
            type: "void",
            "x-component": "MyCustomComponent",
            "x-component-props": {
              records: [
                {
                  name: "Name",
                  code: "Code",
                },
              ],
            },
            properties: {
              input: {
                type: "string",
                "x-component": "Input",
                "x-value":
                  "{{`" +
                  "${$records[0].name} " +
                  "${$records[0].code} " +
                  "`}}",
              },
            },
          },
        },
      }}
    ></SchemaField>
  </FormProvider>
);

export default FormilyReact;
